<!DOCTYPE html>
<html>
    <head>
        <title> 参数管理 </title>
        <meta http-equiv='content-type' content='text/html; charset=UTF-8'/>
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" href="../../js/lib/layui/css/layui.css">
        <link rel="stylesheet" href="../../css/main.css">
        <script type="text/javascript" src="../../js/lib/jquery-1.8.3.min.js"></script>
        <script type="text/javascript" src="../../js/common.js"></script>
        <link rel="stylesheet" href="../../js/lib/jquery.jgrowl/jquery.jgrowl.min.css">
        <script type="text/javascript" src="../../js/lib/jquery.jgrowl/jquery.jgrowl.min.js"></script>

        <script>
            $(function() {
                //  禁止长按选中
                document.documentElement.style.webkitUserSelect = 'none';

                var search = window.location.search;
                var nodeName = search.split("=")[1];
                nodeName = decodeURIComponent(nodeName);

                try {
                    window.paramsjsi.queryParamsByNode(nodeName);
                } catch(e) {
                }
            });

            function queryParamsByNodeCallback(json) {

                var html = "";
                for (var i = 0; i < json.length; i++) {
                    var obj = json[i];
                    var operation = obj.operation;
                    var type = obj.param_type;
                    var length = obj.param_lenth;
                    var item = obj.item;
                    var itemData = obj.item_data;
                    var max = obj.max_value;
                    var min = obj.min_value;

                    var ele = "";
                    if (type == 'ip' || type == 'hexstr' || type == "string") {
                        ele = '<input class="layui-input" type="text" id="val_' + obj.param_addr + '" paramtype="' + type + '" paramlength="' + length + '">';
                    } else if (type == 'int' || type == 'float') {
                        var maxStr = "";
                        if (max.length > 0) {
                            maxStr = "max=\"" + max + "\"";
                        }

                        var minStr = "";
                        if (min.length > 0) {
                            minStr = "min=\"" + min + "\"";
                        }
                        ele = '<input class="layui-input" type="number" ' + maxStr + ' ' + minStr + ' id="val_' + obj.param_addr + '" paramtype="' + type + '" paramlength="' + length + '">';
                    } else if (type == 'hex') {
                        if (item.length == 0) {
                            ele = '<input class="layui-input" type="text" id="val_' + obj.param_addr + '" paramtype="' + type + '" paramlength="' + length + '">';
                        } else {
                            var itemArr = item.split(";");
                            var itemDataArr = itemData.split(";");

                            var len = itemArr.length > itemDataArr.length ? itemDataArr.length : itemArr.length;
                            ele = '<select id="val_' + obj.param_addr + '" paramtype="' + type + '" paramlength="' + length + '">';
                            for (var j = 0; j < len - 1; j++) {
                                ele += '<option value="' + itemDataArr[j] + '">' + itemArr[j] + '</option>';
                            }
                            ele += '</select>';
                        }
                    } else if (type == 'bit') {
                        var len = parseInt(length) * 8;
                        ele = '<select id="val_' + obj.param_addr + '" multiple="true" size="10" paramtype="' + type + '" paramlength="' + length + '">';
                        for (var j = 1; j <= len; j++) {
                            ele += '<option value="' + j + '">' + j + '</option>';
                        }
                        ele += '</select>';
                    } else {
                        ele = '<input class="layui-input" type="text" id="val_' + obj.param_addr + '" paramtype="' + type + '" paramlength="' + length + '">';
                    }

                    html += '<tr><td><input lay-skin="primary" type="checkbox" id="check_' + obj.param_addr + '"/></td><td>' + obj.param_addr + '</td><td>' + obj.param_name + '</td><td>' + ele + '</td></tr>';
                }

                $("#t_body").prepend(html);
                var form = layui.form;
                form.render();
            }
        </script>
        <style>
            .group-input {
                display: inline;
                width: 60px;
            }
            .layui-field-title {
                margin-top: 20px;
                border-top: 1px solid #f2f2f2;
            }
        </style>
    </head>
    <body style="background-color: #fff;">
        <div data-role="page" data-dom-cache="true">
            <div data-role="header" id="homeheader" data-theme="f">
                <h1></h1>
                <a href="#" class="ui-btn-left" data-role="button" data-icon="arrow-l" data-iconpos="notext" data-rel="back">&nbsp;</a>
            </div>
            <div data-role="content" style="padding: 0;">
                <fieldset class="layui-elem-field layui-field-title">
                    <legend>
                        参数列表
                    </legend>
                </fieldset>

                <div class="layui-form">
                    <table class="layui-table">
                        <colgroup>
                            <col width="40">
                            <col>
                            <col>
                            <col>
                        </colgroup>
                        <thead>
                            <tr>
                                <th>&nbsp;</th>
                                <th>信息地址</th>
                                <th>名称</th>
                                <th>值</th>
                            </tr>
                        </thead>
                        <tbody id="t_body"></tbody>
                    </table>
                </div>

                <fieldset class="layui-elem-field layui-field-title">
                    <legend>
                        操作
                    </legend>
                </fieldset>
                <div class="layui-btn-group" style="margin: 0 10px;">
                    <button class="layui-btn" onclick="sendReadSNCmd()">
                        读取
                    </button>
                    <button class="layui-btn layui-btn-danger" onclick="sendChangeSNCmd()">
                        切换
                    </button>
                </div>
                <div style="display: inline;">
                    <input id="currSN" autocomplete="off" placeholder="当前区号" class="layui-input group-input" type="text">
                    <input id="minSN" autocomplete="off" placeholder="最小区号" class="layui-input group-input" type="text">
                    <input id="maxSN" autocomplete="off" placeholder="最大区号" class="layui-input group-input" type="text">
                </div>
                <br/>
                <div class="layui-btn-group" style="margin: 10px;">
                    <button class="layui-btn" onclick="sendReadParamsCmd()">
                        读取
                    </button>
                    <button class="layui-btn" onclick="sendPrepareParamsCmd()">
                        预置
                    </button>
                    <button class="layui-btn layui-btn-danger" onclick="sendConfirmParamsCmd()">
                        固化
                    </button>
                    <button class="layui-btn layui-btn-normal" onclick="sendResetParamsCmd()">
                        撤销
                    </button>
                </div>
            </div>
        </div>
        <script src="../../js/lib/layui/layui.all.js"></script>
        <script>
            /**
             * 下行报文的操作方法
             *
             * @param {}
             *            frame
             */
            var showOutFrame = function(frame) {
                var msg = "命令下发成功 [ " + frame + " ]";
                showMsg(msg);
            };

            /**
             * 收到上行报文的操作方法
             *
             * @param {}
             *            frame
             */
            var showInFrame = function(frame) {

                var msg = "收到响应报文 [ " + frame + " ]";
                showMsg(msg);
            };

            /**
             * 下发读取定值区域指令
             */
            function sendReadSNCmd() {
                try {
                    window.debugjsi.sendReadSNCmd();
                } catch(e) {
                }
            }

            /**
             * 下发读取定值区域指令回调
             */
            function sendReadSNCmdCallback(json) {
                try {
                    if (json) {
                        $("#currSN").val(json.currSN);
                        $("#minSN").val(json.minSN);
                        $("#maxSN").val(json.maxSN);
                        showMsg("读当前定值区号成功!");
                    }
                } catch(e) {
                }
            }

            /**
             * 下发切换定值区域指令
             */
            function sendChangeSNCmd() {
                try {
                    var currSN = $("#currSN").val();
                    if (currSN.length == 0) {
                        showMsg("Warning，当前定值区号不能为空!");
                        return;
                    }

                    window.debugjsi.sendChangeSNCmd(currSN);
                } catch(e) {
                }
            }

            /**
             * 下发切换定值区域指令回调
             */
            function sendChangeSNCmdCallback(json) {
                try {
                    showMsg("切换定值区成功!");
                } catch(e) {
                }
            }

            /**
             * 下发读取参数指令
             */
            function sendReadParamsCmd() {
                try {
                    var checkboxes = $("input:checked", $("#t_body"));

                    if (checkboxes.length == 0) {
                        showMsg("Warning， 请选择待读取的参数和定值!");
                        return;
                    }

                    var currSN = $("#currSN").val();
                    if (currSN.length == 0) {
                        showMsg("Warning，当前定值区号不能为空!");
                        return;
                    }

                    var infoAddrs = "";
                    for (var i = 0; i < checkboxes.length; i++) {
                        infoAddrs += ($(checkboxes[i]).attr("id").split("_")[1] + ",");
                    }

                    window.debugjsi.sendReadParamsCmd(currSN, infoAddrs.substring(0, infoAddrs.length - 1));
                } catch(e) {
                }
            }

            /**
             * 下发读取参数指令回调
             */
            function sendReadParamsCmdCallback(json) {
                try {
                    showMsg("读取参数和定值成功!");
                    for (var i = 0; i < json.length; i++) {
                        var obj = json[i];
                        var addr = obj.addr.toString(16);
                        var value = obj.value;

                        var id = "val_0x" + addr;
                        var paramType = $("#" + id).attr("paramtype");

                        var temp = "";
                        if (paramType == "ip") {
                            temp = parseInt(value.substring(0, 2), 16) + "." + parseInt(value.substring(2, 4), 16) + "." + parseInt(value.substring(4, 6), 16) + "." + parseInt(value.substring(6), 16);
                        } else {
                            temp = parseInt(value, 16);
                        }

                        $("#" + id).val(temp);
                    }
                } catch(e) {
                }
            }

            /**
             * 下发预置参数指令
             */
            function sendPrepareParamsCmd() {
                var checkboxes = $("input:checked", $("#t_body"));

                if (checkboxes.length == 0) {
                    showMsg("Warning， 请选择待写入的参数和定值!");
                    return;
                }

                var currSN = $("#currSN").val();
                if (currSN.length == 0) {
                    showMsg("Warning，当前定值区号不能为空!");
                    return;
                }


                var infoAddrs = "";
                for (var i = 0; i < checkboxes.length; i++) {
                    var id = "val_" +  $(checkboxes[i]).attr("id").split("_")[1];
                    var paramType = $("#" + id).attr("paramtype");
                    var paramLength = $("#" + id).attr("paramlength");
                    var value = $("#" + id).val();
                    
                    var addr = $(checkboxes[i]).attr("id").split("_")[1].substring(2);
                    
                }

                window.debugjsi.sendPrepareParamsCmd(currSN, infoAddrs.substring(0, infoAddrs.length - 1));
            }

            /**
             * 下发固化参数指令
             */
            function sendConfirmParamsCmd() {

            }

            /**
             * 下发撤销参数指令
             */
            function sendResetParamsCmd() {

            }
        </script>
    </body>
</html>